<template>
  <div class="top-button">
    <div class="bridge-select">
      <el-select teleported @change="bridgeChange" v-model="bridgeValue" placeholder="桥梁选择" popper-class="mySelectStyle"
        style="width: 240px">
        <el-option v-for="item in bridgeOptions" :key="item.code" :label="item.name" :value="item.code" />
      </el-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { listBridge } from "@/api/ai/bridge/index";
import { DictForm } from "@/api/dict/types";

const bridgeValue = ref("1");

const bridgeOptions = ref<DictForm[]>([]);
// 选中参数回传
const emits = defineEmits(["bridge-change"]);

// 获取桥型
function getBridge() {
  listBridge().then(({ data }) => {
    bridgeOptions.value = data;
  });
}
function bridgeChange(value) {
  console.log("value", value);
  emits("bridge-change", value);
}

onMounted(() => {
  getBridge();
});
</script>

<style lang="scss" scoped>
.top-button {
  width: 100%;
  height: 60px;
  padding: 0 10px 20px;
  display: flex;
  justify-content: space-between;

  .img-logo {
    height: 100%;

    img {
      width: auto;
      height: 100%;
    }
  }

  .bridge-select {
    :deep(.el-select) {
      width: 126px !important;
      height: 38px;

      .el-select__wrapper {
        height: 38px;
      }
    }
  }
}
</style>
